<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios练习</title>
	</head>
	<body>
		<h1>Axios远程调用联系</h1>
		<script src="../js/axios.js"></script>
		<script>
			//编辑远程Ajax请求
			/*   1.promise对象解决传统ajax中的回调地狱的问题
			     2.Axios封装了promise对象，异步调用更简洁
				 3.常见的请求类型 1.get（查） 2.post（form表单提交 新增） 3.put（修改） 4.delete（删除）
				 4.分组：用法相同 get/delete  post/put
				 注意事项：默认条件下通过浏览器只能发起get请求
			 */
			/* 1.Axios入门案例 
			原始方式：参数：1.url地址 2.请求参数 3.回调函数
			axios方式: 参数：1.url地址 2.请求参数 
			                 关键字：then(回调函数)*/				 
			axios.get("http://localhost:8090/findAll")
			     .then(function(result){
					 //result返回值是一个promise对象
					 console.log(result)
					 //动态获取服务器返回值result.data的方式
					 console.log(result.data)
				 })
				 
				 //2.箭头函数写法 参数只有一个可以省略括号
				 axios.get("http://localhost:8090/findAll")
				      .then(result => {
						  console.log(result.data)
					  })
				/**
				 * 3.带参数的请求参数一---字符串拼接
				 * 需求：查询id=100的用户数据
				 * url：http：//localhost：8090/getUserById?id=1*/	
				axios.get("http://localhost:8090/getUserById?id=1")
				     .then(result => {
						 console.log(result.data)
					 })
				/* 对象请求的方式 需求：
				如果ajax请求的参数有多个，如果采用字符串拼接的方式，导致效率太低。结构复杂所以采用对象的方式实现数据的提交*/
				/* 根据对象查询数据库 */
				//1.封装对象
				let user = {
					name : '大乔',
					sex : '女'
				}
				axios.get("http://localhost:8090/getUserByNS",{
					//关键字params
					params: user
				}).then(result => {
					console.log(result.data)
				})
				axios.get("http://localhost:8090/User/君")
				     .then(result => {
						 console.log(result.data)
					 })
				
				    
					 
		</script>
	</body>
</html>
